import React from 'react'
import { sty } from '../../tool'

export default class TextButton extends React.PureComponent {
    static defaultProps = {
        lightColor:'#888',
    }
    constructor(props) {
        super(props)
        this.state = {
            nowColor: this.props.style? this.props.style.color : '#000'
        }
    }
    render() {
        let {lightColor, style, ...rest} = this.props
        let {nowColor} = this.state
        let rootProps = {
            style: {
                ...style,
                ...sty.btn(),
                color: nowColor,
            },
            onTouchStart:this.handleTouchStart,
            onTouchEnd:this.handleTouchEnd,
            onMouseDown:this.handleTouchStart,
            onMouseUp:this.handleTouchEnd,
            ...rest
        }
        return (
            <div {...rootProps} >
                {this.props.children}
            </div>
        )
    }
    handleTouchStart = ()=>{
        this.setState({
            nowColor: this.props.lightColor,
        })  
    }
    handleTouchEnd = ()=>{
        this.setState({
            nowColor: this.props.style.color,
        })
    }
}